<template>
	<view class="coupon-wrap" v-if="!loadding">
		<block v-if="DataList.length > 0">
			<view class="coupon_item" v-for="(item, index) in DataList" :key="index">
				<view style="width: 200rpx;color: #1BAE61;">
					<view style="text-align: center;font-size: 36rpx;font-weight: bold;"
						v-if="item.coupon_type.value==10">￥{{item.reduce_price}}</view>
					<view style="text-align: center;font-size: 36rpx;font-weight: bold;"
						v-if="item.coupon_type.value==20">{{item.discount}}折</view>
					<view style="text-align: center;font-size: 24rpx;">满￥{{item.min_price}}可用</view>
				</view>
				<view style="display: flex; align-items: center;">
					<view style="width: 260rpx;margin-left: 20rpx;">
						<view class="lue" style="color: #333;font-size: 32rpx;font-weight: bold;">
							{{item.coupon_type.text}}
						</view>
						<view class="lue" style="color: #777;font-size: 24rpx;margin-top: 12rpx;">
							{{item.name}}
						</view>
						<view class="lue" style="color: #777;font-size: 24rpx;margin-top: 12rpx;">
							有效期：{{item.end_time.text}}</view>
					</view>
					<view class="coupon-btns">
						<button class="aaa" @click="receive(item.coupon_id)" v-if="!item.is_get">立即领取</button>
						<button class="bbb" v-if="item.is_get">已领取</button>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="none-data-box">
				<image src="/static/none.png" mode="widthFix"></image>
				<text>暂无数据</text>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				/*是否加载完成*/
				loadding: true,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				DataList: [],
				/*当前页面*/
				page: 1,
				/*每页条数*/
				list_rows: 10,
			};
		},
		mounted() {
			uni.showLoading({
				title: '加载中'
			});
			/*获取优惠券列表*/
			this.getData();
		},
		methods: {
			/*获取数据*/
			getData() {
				let self = this;
				self._get('coupon.coupon/lists', {
					page: self.page,
					list_rows: self.list_rows,
					shop_supplier_id: 0
				}, function(res) {
					self.DataList =self.DataList.concat(res.data.list);
					self.loadding = false;
					uni.hideLoading();
				});
			},
			/*查看规则*/
			lookRule(item) {
				item.rule = true;
			},

			/*关闭规则*/
			closeRule(item) {
				item.rule = false;
			},

			/*领取优惠券*/
			receive(e) {

				let self = this;
				uni.showLoading({
					title: '领取中'
				});
				self._post('user.coupon/receive', {
					coupon_id: e,
				}, function(res) {
					uni.hideLoading();
					uni.showToast({
						title: '领取成功',
						duration: 2000,
						icon: 'success'
					});
					uni.navigateTo({
						url:'/pages/user/my-coupon/my-coupon'
					})
				});
			},

		}
	};
</script>

<style lang="scss" scoped>
	.coupon_item {
		width: 686rpx;
		margin: 20rpx auto;
		box-sizing: border-box;
		height: 204rpx;
		background: url('@/static/temp/coupon.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;

		.coupon-btns {
			padding-left: 20rpx;

			.aaa {
				padding: 0;
				height: 56rpx;
				line-height: 56rpx;
				width: 150rpx;
				text-align: center;
				border-radius: 28rpx;
				background-color: #fff;
				border: 1rpx solid #02A550;
				color: #02A550;
				font-size: 24rpx
			}

			.bbb {
				padding: 0;
				height: 56rpx;
				line-height: 56rpx;
				width: 150rpx;
				text-align: center;
				border-radius: 28rpx;
				background-color: #fff;
				border: 1rpx solid #777;
				color: #777;
				font-size: 24rpx
			}
		}
	}

	.coupon-wrap {
		padding: 30rpx;
	}

	.item-wrap {
		margin-bottom: 20rpx;
	}

	.range_item {
		border: 1rpx solid #D9D9D9;
		border-top: none;
		padding: 8rpx;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		color: #666666;
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
	}
</style>